<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		/* 进入前的效果*/
		.fade-enter-active, .fade-leave-active {
	  		transition: opacity .5s;
		}
		.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
	  		opacity: 0;
		}
	</style>
</head>
<body>
	<div id="demo">
	  	<button v-on:click="show = !show">
	    	Toggle
	  	</button>
	  	<transition name="fade">
	    	<p v-if="show">hello</p>
	  	</transition>
	</div>

	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
	  		el: '#demo',
	  		data: {
	    		show: true
	  		}
		})
	</script>
</body>
</html>